<template>
	<view class="home">
		<view class="nav">
			<view class="nav_item">
				<view class="icon_container">
					<image class="nav_icon" src="/static/images/ziyuan.png" mode="aspectFit"></image>
					</view>
				<text>资源</text>
			</view>
			<view class="nav_item">
				<view class="icon_container">
					<image class="nav_icon" src="/static/images/shipin.png" mode="aspectFit"></image>
				</view>				
				<text>视频</text>
			</view>
			<view class="nav_item">
				<view class="icon_container">
					<image class="nav_icon" src="/static/images/tupian.png" mode="aspectFit"></image>
					</view>
				<text>图片</text>
			</view>
			<view class="nav_item">
				<view class="icon_container">
					<image class="nav_icon" src="/static/images/guanyuwomen.png" mode="aspectFit"></image>					
					</view>
				<text>关于我们</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
// 定义颜色变量
$global-color: #007AFF;    // 定义全局颜色
$shop-color: #FF6B6B;      // 定义店铺主题色
$circle-bg-color: #FFC0CB; // 粉色背景

.home {
	.nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 40rpx 0;
		
		.nav_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			
			.icon_container {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				background: $circle-bg-color; // 粉色圆形背景
				border-radius: 50%;
				margin: 10px auto;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #ff9dbb;
				box-shadow: 0 4rpx 12rpx rgba(255, 192, 203, 0.4);
				
				.nav_icon {
					width: 60rpx;    // 图标大小
					height: 60rpx;
					object-fit: contain;
					z-index: 2;
				}
				
				// 移除原来的字体图标样式
				.iconfont {
					display: none;
				}
			}
			
			text {
				font-size: 26rpx;
				color: $shop-color;
				margin-top: 10rpx;
				font-weight: 500;
			}
		}
	}
	
	// 原来的box1样式保持不变
	.box1 {
		width: 375rpx;
		height: 375rpx;
		background: $global-color;
		font-size: 30rpx;
		color: #fff;
		
		text {
			color: pink;
		}
		
		image {
			height: 100%;
			width: 100%;
		}
	}
}
</style>